<template>
    <div style="text-align:center" class="div_login_main">
        <el-card class="box-card">
            <h2>
                <div v-t="'login.title'"></div>
            </h2>
            <div v-t="'login.subtitle'">
            </div>

            <el-divider />

            <div style="margin-left: 30px; margin-right: 30px;">
                <el-form :model="form">
                    <el-form-item>
                        <el-input autofocus v-model="form.loginName" :placeholder="$t('login.phUserName')">
                            <template #prefix>
                                <el-icon>
                                    <User />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-input  v-model="form.pwd" type="password" :placeholder="$t('login.phPassword')" show-password>
                            <template #prefix>
                                <el-icon>
                                    <Unlock />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-row>
                            <el-col :span="12">
                                <el-input @keyup.enter.native="login" maxlength="4" v-model="form.verifyCode" :placeholder="$t('login.phVerifyCode')">
                                    <template #prefix>
                                        <el-icon>
                                            <CircleCheck />
                                        </el-icon>
                                    </template>
                                </el-input>
                            </el-col>

                            <el-col :span="12">
                                <el-image @click.native="resetVerifyCode" style="cursor: pointer;" :src="form.imgUrl"></el-image>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-form>

                <!-- 
                <div style="text-align: right;">
                    <el-text class="mx-1">{{ $t('login.retrievePassword') }}</el-text>
                </div>
                -->

                <el-button @click="login" type="primary" style="width: 100%; margin-top: 20px;">{{ $t('login.login') }}</el-button>
            </div>


        </el-card>
    </div>
</template>


<script lang="ts" setup>
import { ElMessage } from 'element-plus'

import { reactive } from 'vue'
import axios from 'axios'

import { getStore,setStore } from '~/util/store';
import router from '~/router/router'

import {encrypt} from '~/util/crypto'

const form = reactive({
    loginName: '',
    pwd: '',
    verifyCode: '',
    imgUrl:''
})

// 登录时使用的临时票据
let ticket = '';


// ==========================================
// 进入各函数声明部分
// ==========================================

// 重新获取验证码图片
function resetVerifyCode() {

    // 先获取ticket
    axios.post('/api/index/login/get/ticket', {}).then(
        res => {
            if(res.data != null && res.data.success){
                ticket = res.data.data.ticket;
                getVerifyCodeImg(res.data.data.ticket);
            }
        }
    )
}

// 获取验证码图片
function getVerifyCodeImg(ticket:string) {
    // 获取验证码
    axios.get('/api/index/login/verifycode?ticket=' + ticket, {
        responseType: 'blob' // 指定响应类型为文件流
    }).then((response) => {
        const blob = new Blob([response.data], { type: response.data.type }); // 保存文件流为 Blob
        form.imgUrl = URL.createObjectURL(blob); // 转换 Blob 为 URL
    }).catch((error) => {
        console.log(error);
    });
}


// 登录
function login(){
    
    let parm = {
        ticket:ticket,
        loginName:form.loginName,
        pwd : encrypt(form.pwd),
        verifyCode: form.verifyCode
    }
    /*
    parm.ticket = ticket;
    parm.pwd = encrypt(parm.pwd);
    */

    axios.post('/api/admin/Index/login' , parm).then(
        res=>{
            //if(res.data != null){
            if(res.data.code != 200){
                resetVerifyCode();
                ElMessage.error(res.data.msg);
                return;
            }

            // 准备路由跳转到新窗口
            res.data.data.ticket = ticket;

            // 向sessionStorage中写入缓存数据
            setStore({name:"CacheData",content:res.data.data,type:true})

            clearInterval(timer);
            router.push('/index')
            //}
        }
    )
}


// ==========================================
// 进入页面初始化处理部分
// ==========================================
// 初始化验证码图片
resetVerifyCode();
// 定时刷新[每8分钟主动刷新一次，更新验证码]
let timer = setInterval(() => {
    resetVerifyCode();
}, 60 * 1000 * 8)


let cacheData = getStore({name:"CacheData"});
if(cacheData != null){
    clearInterval(timer);
    router.push('/index');
}



//console.log(cacheData)

</script>

<style>
.div_login_main {
    background-image: url(../img/login-bg.jpg);
    width: 100vw;
    height: 100vh;
}

.box-card {
    width: 400px;
    height: 440px;
    position: absolute;
    left: calc(60vw - 170px);
    top: calc(50vh - 220px);
    opacity: 1
}
</style>

